<template>
	<view class="my-add-path">
		<!-- 自定义导航栏 -->
		<uniNavbar 
			:title=title 
			right-text="保存"
			fixed="true"
			status-bar='true'
			@clickRight='goSave'
		></uniNavbar>
		<view class="path-item">
			<view>收件人</view>
			<input type="text" value="" placeholder="收件人姓名" v-model="pathObj.name"/>
		</view>
		<view class="path-item">
			<view>手机号</view>
			<input type="text" value="" placeholder="11位手机号" v-model="pathObj.tel"/>
		</view>
		<view class="path-item">
			<view>所在地址</view>
			<view @tap="showCityPicker">{{pathObj.city}}</view>
			<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm">
			</mpvue-city-picker>
		</view>
		<view class="path-item">
			<view>详细地址</view>
			<input type="text" value="" placeholder="5到60个字符" v-model="pathObj.details" />
		</view>
		<view class="path-item">
			<view>设为默认地址</view>
			<radio-group name="" @change="radioChange">
				<label class="radio">
					<radio value="" color="#FF3333" :checked="pathObj.isDefault" /><text></text>
				</label>
			</radio-group>
			
		</view>
	</view>
</template>

<script>
	import uniNavbar from '@/components/uni/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import mpvueCityPicker from '../../components/uni/mpvue-citypicker/mpvueCityPicker.vue'
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				pickerValueDefault: [0, 0, 1],
				pathObj:{
					name:"",
					tel:"",
					city:"请选择",
					details:"",
					isDefault:false
				},
				i:-1,
				//是否修改的状态
				isStatus:false,
				title:"新增地址"
			}
		},
		components:{
			mpvueCityPicker,
			uniNavbar
		},
		onLoad(e) {
			// console.log(e.data);
			if(e.data){
				this.title = "修改地址";
				let result = JSON.parse(e.data);
				this.pathObj = result.item;
				this.i = result.index;
				this.isStatus = true;
			}
		},
		methods: {
			...mapActions(["createPathFn","updatePathFn"]),
			//点击保存
			goSave(){
				if(this.isStatus){
					//修改
					this.updatePathFn({
						index:this.i,
						item:this.pathObj
					})
					uni.navigateBack({
						delta:1
					})
				}else{
					//新增,保存填入的地址数据
					this.createPathFn(this.pathObj)
					uni.navigateBack({
						delta:1
					})
				}
			},
			//地址三级联动
			 showCityPicker() {
			  this.$refs.mpvueCityPicker.show();
			},
			onConfirm(e) {
			  this.pathObj.city = e.label;
			},
			//单选按钮的切换
			radioChange(){
				this.pathObj.isDefault = !this.pathObj.isDefault;
			}
		}
	}
</script>

<style scoped>
.my-add-path {
	padding-left: 20rpx;
}
.path-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 0;
	width: 100%;
	border-bottom: 2rpx solid #CCCCCC;
}
.path-item input {
	flex: 1;
	text-align: left;
	padding-left: 10rpx;
}
</style>
